<template>
  <div class="news-list">
    <div v-for="item in newsList" :key="item.id" class="news-item" @click="handleDetail(item.id)">
      <img src="http://cs-static-assets.oss-cn-beijing.aliyuncs.com/kaikeba/banner3.jpg" alt="image" />
      <div class="right-content">
        {{ item.title }}
        <div class="right-content-bottom">
          <span class="click-count">点击数：{{ item.click }}</span>
          <span>发布时间：{{ item.add_time | formatDate('YYYY-MM-DD') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  methods: {
    ...mapActions('home/newsListStore', ['getNewsList']),
    handleDetail (id) {
      this.$router.push({ name: 'newsDetail', query: { newsId: id }})
    }
  },
  computed: {
    ...mapState('home/newsListStore', ['newsList']),
  },
  created () {
    this.getNewsList()
  }
};
</script>
<style scoped lang="less">
  .news-list {
    .news-item {
      padding: 5px 10px;
      display: flex;
      img {
        width: 48px;
        height: 48px;
        border-radius: 4px;
      }
      .right-content {
        font-size: 14px;
        margin-left: 10px;
        // 设置显示省略号的元素不能和display:flex布局一起使用，否则会失效
        width: calc(100% - 58px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .right-content-bottom {
          margin-top: 10px;
          color: skyblue;
          .click-count {
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>